<template>
    <el-container class="container">
        <el-header>
            <el-input placeholder="请输入" class="input" v-model="city">
                <template v-slot:prepend>城市名</template>
            </el-input>
        </el-header>
        <el-main class="main">
            <div class="today">
                今天：
                <span>{{ this.todayData.weather ?? this.emptyData }}</span>
                <span style="margin-left: 20px">{{ this.todayData.direct ?? this.emptyData }}</span>
                <span style="margin-left: 100px">{{ this.todayData.date ?? this.emptyData }}</span>
            </div>
            <div class="real">
                <span class="temp">{{ this.realtime.temperature ?? this.emptyData }}℃</span>
                <span class="realInfo">{{ this.realtime.info ?? this.emptyData }}</span>
                <span class="realInfo" style="margin-left: 20px">{{ this.realtime.direct ?? this.emptyData }}</span>
                <span class="realInfo" style="margin-left: 20px">{{ this.realtime.power ?? this.emptyData }}</span>
            </div>
            <div class="real">
                <span class="realInfo">空气质量：{{ this.realtime.aqi ?? this.emptyData }}</span>
                <span class="realInfo" style="margin-left: 20px">湿度：{{ this.realtime.humidity ?? this.emptyData }}</span>
            </div>
            <div class="future">
                <div class="header">未来5日天气预报</div>
                <el-table :data="futureData" style="margin-top: 30px">
                    <el-table-column prop="date" label="日期"></el-table-column>
                    <el-table-column prop="temperature" label="温度"></el-table-column>
                    <el-table-column prop="weather" label="天气"></el-table-column>
                    <el-table-column prop="direct" label="风向"></el-table-column>
                </el-table>
            </div>
        </el-main>
    </el-container>
</template>

<script>
export default {
    name: "WeatherDemo",
    mounted() {
        this.axios.defaults.baseURL = "/api"
        this.getCityWeather(this.city)
    },
    data() {
        return {
            city: "西安",
            weatherData: {},
            todayData: {},
            emptyData: "暂无数据",
            realtime: {},
            futureData: []
        }
    },
    methods: {
        getCityWeather(city) {
            let url = "/simpleWeather/query?city=" + encodeURI(city) + "&key=c6b31fe13ce6d2da3b525c1aad1a93ba"
            this.axios.get(url).then((res) => {
                if (res.data["resultcode"] !== 0){
                    this.$message.warning({
                        showClose: true,
                        message: res.data["reason"],
                    })
                    return
                }
                console.log(res.data, res.status)

                this.weatherData = res.data
                this.todayData = this.weatherData.result.future[0]
                this.realtime = this.weatherData.result.realtime
                this.futureData = this.weatherData.result.future
            })
        }
    }
}
</script>

<style scoped>
.container {
    height: 100vh;
    background: linear-gradient(rgb(13, 104, 188), rgb(54, 131, 195));
    padding: 30px;
}

.input {
    width: 300px;
}

.today {
    font-size: 20px;
    color: white;
}

.temp {
    font-size: 79px;
    color: white;
}

.realInfo {
    color: white;
}

.future {
    margin-top: 40px;
}

.header {
    color: white;
    font-size: 27px;
}
</style>